<div class="container-fluid">
    <h4 class="page-title">home</h4>
    <!--卡片-->
    <div class="row">
        <div class="col-md-3">
            <div class="card card-stats card-warning">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <img src="assets/img/管理员.jpg" height="100" width="100" style="border-radius: 100%"/>
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">管理员</p>
                                <h4 class="card-title">root</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-success">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <img src="assets/img/教师.jpg" height="100" width="100" style="border-radius: 100%"/>
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">优秀老师</p>
                                <h4 class="card-title">张老师</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-danger">
                <div class="card-body">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <img src="assets/img/学生.jpg" height="100" width="100" style="border-radius: 100%"/>
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">优秀学生</p>
                                <h4 class="card-title">李同学</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-primary">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <img src="assets/img/统计.png" height="100" width="100"/>
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">学生日记优占比</p>
                                <h4 id="statistics" class="card-title"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">2021年度实训成绩饼图统计</h4>
                </div>
                <div id="main" style="height: 400px;" class="card-body">
                    饼图
                </div>
            </div>
        </div>
        <div class="col-md-7">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">2021年度实训成绩条形图统计</h4>
                </div>
                <div id="main1" style="height: 400px;" class="card-body">
                    条形图
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var token;
    var count;
    $(function () {
        token = sessionStorage.getItem('token')
        //getMeunListByRole()
        //dialogueMessage()
        //audit();
        /*$.ajax({
            url: '/oa/t-diary/fraction',
            type: "GET",
            dataType: "json",
            headers: {
                token: "" + token
            },
            success: function (data) {
                if (data.code == 200){
                    count = data.data
                    var a = Number(count[0].fraction)
                    var sum=0;
                    for (var i = 0 ; i < count.length ; i++) {
                        sum += Number(count[i].fraction)
                    }
                    var statistics = Math.round((a/sum)*100)+'%'
                    $('#statistics').html(statistics)
                    chart(count)
                }else if (data.code == 401) {
                    window.location.href = 'login.html'
                }else {
                    $.message({
                        message:data.msg,
                        type:'error'
                    });
                }
            }
        })*/
        chart(0);
    })
    function chart(count) {
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title : {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['优','良','差','不及格']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:/*count[0].fraction*/2, name:'优'},
                        {value:/*count[1].fraction*/3, name:'良'},
                        {value:/*count[2].fraction*/2, name:'差'},
                        {value:/*count[3].fraction*/5, name:'不及格'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);

        var myChart1 = echarts.init(document.getElementById('main1'));
        option1 = {
            xAxis: {
                type: 'category',
                data: ['优', '良', '差', '不及格']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                //data: [count[0].fraction, count[1].fraction, count[2].fraction, count[3].fraction],
                data: [2, 3, 2, 5],
                type: 'bar'
            }]
        };

        myChart1.setOption(option1);
    }
</script>